<!DOCTYPE html>
<html>
    <body>
        <script type="text/javascript" src="../common/jquery-3.7.1.js"></script>
        <link rel="stylesheet" href="../common/index.css">
        <title>产线料车分布看板</title>
        <script type="text/javascript">
            window.onload=function(){
                const alphabetArray = generateAlphabetArray();
                var lineNumber=Math.floor(Math.random() * 18) + 1;
                var data=[];
                for (var i = 0; i < lineNumber; i++) {
                    var status=Math.floor(Math.random() * 4) + 1;
                    var carCode="";
                    if(status!==1){
                        carCode='占用料车编码：'+alphabetArray[i]+""+Math.floor(Math.random() * 100000000).toString().padStart(8, '0')
                    }
                    data.push({
                        siteCode:alphabetArray[i],
                        status:status,
                        carCode:carCode,
                    })
                }
                $(".lineTotal").html(data.length);
                $(".carTotal").html(data.filter(item=>item.status!==1).length);
                tableScroll(data);
                lineStatusDiv(data);

                setInterval(function(){
                    data=[];
                    for (var i = 0; i < lineNumber; i++) {
                        var status=Math.floor(Math.random() * 4) + 1;
                        var carCode="";
                        if(status!==1){
                            carCode='占用料车编码：'+alphabetArray[i]+""+Math.floor(Math.random() * 100000000).toString().padStart(8, '0')
                        }
                        data.push({
                            siteCode:alphabetArray[i],
                            status:status,
                            carCode:carCode,
                        })
                    }

                    $(".lineTotal").html(data.length);
                    $(".carTotal").html(data.filter(item=>item.status!==1).length);
                    updateTableScroll(data);
                    updateLineStatusDiv(data);
                },5000)
            }
            function generateAlphabetArray() {
                const alphabetArray = [];
                for (let i = 65; i <= 90; i++) {
                    alphabetArray.push(String.fromCharCode(i));
                }
                return alphabetArray;
            }
            //滚动表格
            function tableScroll(data) {
                let processList = data;
                let processHtml = '<ul class="list">';
                var row=0;
                var statusData=[
                    {value:1,title:""},
                    {value:2,title:"有退料待回收"},
                    {value:3,title:"待接收"},
                    {value:4,title:"空料车待回收"},
                ]
                processList.forEach(element => {
                    processHtml += ('<li class="item">'+
                        '<span style="width:25%" class="status'+element.status+' line'+element.siteCode+'">'+element.siteCode+'站点：'+(element.status==1?"空闲":"占用")+'</span>'+
                        '<span style="width:25%" class="status'+element.status+' carLine'+element.siteCode+'">' + element.carCode + '</span>'+
                        '<span style="width:25%" class="status'+element.status+' statusLine'+element.siteCode+'">' + statusData.filter(item=>item.value==element.status)[0].title + '</span> ');
                        row++;
                });
                $(".process-td").append(processHtml += "</ul>");
                var html = $(".process-td ul").html();


                var containerHeight = $(".process-td").height();
                var itemHeight = $(".process-td li").outerHeight(true);
                if (processList.length > Math.round(containerHeight / itemHeight)) {
                    $(".process-td ul").append(html);
                    var ls = $(".process-td li").length / 2;
                    a = 0
                    ref = setInterval(function () {
                        a++
                        if (a == ls) {
                            a = 1
                            $(".process-td ul").css({ marginTop: 0 })
                            $(".process-td ul").animate({ marginTop: -'2.28' * a + 'vw' }, 1000)
                        }
                        $(".process-td ul").animate({ marginTop: -'2.28' * a + 'vw' }, 1000)
                    }, 2500);
                }
            }
            function updateTableScroll(date){
                const alphabetArray = generateAlphabetArray();
                var statusData=[
                    {value:1,title:""},
                    {value:2,title:"有退料待回收"},
                    {value:3,title:"待接收"},
                    {value:4,title:"空料车待回收"},
                ]
                for (let i = 0; i < date.length; i++) {
                    var element = date[i];
                    $(".line"+alphabetArray[i]).html(alphabetArray[i]+'站点：'+(element.status==1?"空闲":"占用")).removeClass().addClass("status"+element.status).addClass("line"+alphabetArray[i]);
                    $(".carLine"+alphabetArray[i]).html(element.carCode).removeClass().addClass("status"+element.status).addClass("carLine"+alphabetArray[i]);
                    $(".statusLine"+alphabetArray[i]).html(statusData.filter(item=>item.value==element.status)[0].title).removeClass().addClass("status"+element.status).addClass("statusLine"+alphabetArray[i]);
                }
            }
            function lineStatusDiv(data){
                var html = '';
                var number=1;
                var number1=1;
                data.forEach(item => {
                    if(number==2 || data.length==number1){
                        html+="<div style='width: 50%;'>"
                        html+='<div class="statusDiv'+item.status+' statusLineDiv'+item.siteCode+'" style="height: 2vw;"></div>';
                        html+="<div style='color: #fff;text-align: center;font-size:.9vw'>站点："+item.siteCode+"</div>"
                        html+="</div>"
                        $('.lineStatusDiv').append('<div class="statusLineDiv1">'+html+'</div>');
                        html='';
                        number=1;
                    }else{
                        html+="<div style='width: 50%;margin-right: 1vw;'>"
                        html+='<div class="statusDiv'+item.status+' statusLineDiv'+item.siteCode+'" style="margin-right: 1vw;height: 2vw;"></div>';
                        html+="<div style='color: #fff;text-align: center;font-size:.9vw'>站点："+item.siteCode+"</div>"
                        html+="</div>"
                        number++;
                    }
                    number1++;
                });
            }
            function updateLineStatusDiv(data){
                const alphabetArray = generateAlphabetArray();
                for (let i = 0; i < data.length; i++) {
                    const element = data[i];
                    $('.statusLineDiv'+alphabetArray[i]).removeClass().addClass("statusDiv"+element.status).addClass("statusLineDiv"+alphabetArray[i]);
                }
            }
        </script>
        <style>
            .title{
                color: #68d8fe;
                display: flex;
                justify-content: center;
                font-size: 3vw;
                padding-top: 1vw;
                padding-bottom: 2vw;
            }
            .carNumber{
                color: rgb(1, 166, 240);
                width: 50%;
                display: flex;
                justify-content: center;
                font-size: 2vw;
            }
            .process-td{
                background-color:transparent;
            }
            .status1{
                color: #fff
            }
            .statusDiv1{
                background-color: #fff;
                color: #000;
            }
            .status2{
                color: red
            }
            .statusDiv2{
                background-color: red;
                color: #fff;
            }
            .status3{
                color: greenyellow
            }
            .statusDiv3{
                background-color: greenyellow;
                color: #fff;
            }
            .status4{
                color: orange
            }
            .statusDiv4{
                background-color: orange;
                color: #fff;
            }
            .statusDiv{
                width: 10%;
            }
            .lineStatusDiv{
                width: 100%;
                display: flex;
                padding-left: 3vw;
                flex-wrap: wrap;
            }
            .statusLineDiv1{
                display: flex;
                height: 6vw;
                width: 27%;
                margin-right: 4vw;
            }
            .statusDiv1,.statusDiv2,.statusDiv3,.statusDiv4{
                width: 100%;
                display: flex;
                justify-content: center;
                font-size: .9vw;
                padding: .8vw 0;
            }
            .process-td{
                display: flex;
                justify-content: center;
                height: 30%;
                margin-top: 3vw;
            }
            .list{
                width: 80%;
            }
        </style>
        <div class="main">
            <div class="title">产线料车分布看板</div>
            <div style="display: flex;margin-top: 3vw;">
                <div class="carNumber">线边站位数：<span class="lineTotal"></span></div>
                <div class="carNumber">线边料车总数：<span class="carTotal"></span></div>
            </div>
            <div class="process-td"></div>
            <div style="width: 100%;display: flex;justify-content: center;padding-top: 3vw;">
                <div style="width: 90%;display: flex;">
                    <div class="statusDiv">
                        <div class="statusDiv3" style="margin-bottom: 1.5vw;">待接收</div>
                        <div class="statusDiv4" style="margin-bottom: 1.5vw;">空料车待回收</div>
                        <div class="statusDiv2" style="margin-bottom: 1.5vw;">有退料待回收</div>
                        <div class="statusDiv1" style="margin-bottom: 1.5vw;">无料车</div>
                    </div>
                    <div class="lineStatusDiv">
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>